import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import {HashLink as Link} from "react-router-hash-link";

import MenuBook from "@material-ui/icons/MenuBookOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
// import { Context } from "../store/appContext";
import { useHistory } from "react-router-dom";
import Bg from "./bg.jfif";
const useStyles = makeStyles(theme => ({
    paper: {
        paddingTop: theme.spacing(8),
        display: "flex",
        flexDirection: "column",
        alignItems: "center"
    },
    container: {
        minHeight: "100%",
        minWidth: "100%",
        backgroundImage: `url(${Bg})`,
        backgroundSize: "cover",
        backgroundRepeat: "no-no-repeat",
        backgroundPosition: "center",
        padding: '0px',

    },
    avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main
    },
    menuButton: {
        marginTop: theme.spacing(3),
    }
}));
export function Menu() {
    const classes = useStyles();
    return <Container component="main" className={classes.container}>
        <Container  maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
                <Avatar className={classes.avatar}>
                    <MenuBook />
                </Avatar>
                <Typography component="h1" variant="h5">
                    Menu
			</Typography>
                <Button className={classes.menuButton} fullWidth variant="contained">
                    <Link to="info">快递点信息</Link>
                </Button>
                <Button className={classes.menuButton} fullWidth variant="contained">
                    <Link to="position">辅助选址</Link>
                </Button>
                <Button className={classes.menuButton} fullWidth variant="contained">
                    <Link to="forecast">预测模块</Link>
                </Button>
            </div>
        </Container>
    </Container>
}